<template>
<div>
<el-card shadow="never" style="min-height:650px;">
<div v-if="search_visible" id="search" class="search">
	<el-form ref="form" size="small" :model="searchData" inline>
		<el-form-item label="用户名">
			<el-input id="username" v-model="searchData.username"  style="width:150px;" placeholder="请输入用户名"></el-input>
		</el-form-item>
		<el-form-item label="性别">
			<el-select style="width:150px" v-model="searchData.sex" filterable clearable placeholder="请选择">
				<el-option key="0" label="男" :value="1"></el-option>
				<el-option key="1" label="女" :value="2"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="手机号">
			<el-input id="mobile" v-model="searchData.mobile"  style="width:150px;" placeholder="请输入手机号"></el-input>
		</el-form-item>
		<el-form-item label="邮箱">
			<el-input id="email" v-model="searchData.email"  style="width:150px;" placeholder="请输入邮箱"></el-input>
		</el-form-item>
		<el-form-item label="状态">
			<el-select style="width:150px" v-model="searchData.status" filterable clearable placeholder="请选择">
				<el-option key="0" label="正常" :value="1"></el-option>
				<el-option key="1" label="禁用" :value="0"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="省市区">
			<shengshiqu :is_clear="is_clear" :checkstrictly="{ checkStrictly: true }" :type="1" :treeoption.sync="searchData.ssq"></shengshiqu>
		</el-form-item>
		<el-form-item label="创建时间">
			<TimeRangePiker :is_clear.sync="is_clear" :option.sync="searchData.create_time"></TimeRangePiker>
		</el-form-item>
		<Search :page_data.sync="page_data" :search_data.sync="searchData" :is_clear.sync="is_clear" @refesh_list="index"></Search>
	</el-form>
</div>
<div class="btn-group" style="margin-top:10px;margin-bottom:10px;">
	<div>
		<el-button v-for="item in button_group" v-if="checkPermission(item.access)" :key="item.access"  :disabled="$data[item.disabled]" :type="item.color" size="mini" :icon="item.icon" @click="fn(item.clickname)">
			<span v-if="item.batch" v-text="$data['batchUpdateStatus']?'批量保存':'批量编辑'"></span>
			<span v-else v-text="item.name"></span>
		</el-button>
	</div>
	<div><TableTool tableid="membe" :search_visible.sync="search_visible"   @refesh_list="index"></TableTool></div>
</div>
<el-table id="membe" :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="membe_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @sort-change='sortChange' v-loading="loading"  ref="multipleTable" border class="eltable" :data="list" :summary-method="getSummaries" show-summary style="width: 100%">
	<el-table-column align="center" type="selection" width="42"></el-table-column>
	<el-table-column align="center" type = '' property="membe_id"  label="编号"  width="70">
	</el-table-column>
	<el-table-column align="center"  property="username"  label="用户名"  width="85">
	</el-table-column>
	<el-table-column align="center"  property="sex"  label="性别"  width="90">
		<template slot-scope="scope">
			<el-tag type="primary" v-if="scope.row.sex == '1'" size="mini" effect="dark">男</el-tag>
			<el-tag type="warning" v-if="scope.row.sex == '2'" size="mini" effect="dark">女</el-tag>
		</template>
	</el-table-column>
	<el-table-column align="center"  property="mobile"  label="手机号"  width="110">
	</el-table-column>
	<el-table-column align="center"  property="pic"  label="头像"  width="90">
		<template slot-scope="scope">
			<div class="demo-image__preview">
				<el-image v-if="scope.row.pic" class="table_list_pic" :src="scope.row.pic"  :preview-src-list="[scope.row.pic]"></el-image>
			</div>
		</template>
	</el-table-column>
	<el-table-column align="center"  property="email"  label="邮箱"  width="">
	</el-table-column>
	<el-table-column align="center"  property="amount" sortable='custom' label="积分"  width="90">
		<template slot-scope="scope">
			<el-tag v-if="scope.row.amount" type="info" size="mini" effect="dark">{{scope.row.amount}}</el-tag>
		</template>
	</el-table-column>
	<el-table-column align="center"  property="status"  label="状态"  width="90">
		<template slot-scope="scope">
			<el-switch @change="updateExt(scope.row,'status')" :active-value="1" :inactive-value="0" v-model="scope.row.status"></el-switch>
		</template>
	</el-table-column>
	<el-table-column align="center"  property="ssq"  label="省市区"  width="">
	</el-table-column>
	<el-table-column align="center"  property="create_time"  label="创建时间"  width="">
		<template slot-scope="scope">
			{{parseTime(scope.row.create_time)}}
		</template>
	</el-table-column>
	<el-table-column :fixed="$store.getters.device == 'mobile'?false:'right'" label="操作" align="center" width="190">
		<template slot-scope="scope">
			<div v-if="scope.row.membe_id">
				<el-button  size="mini" v-if="checkPermission('/admin/Membe/update')" icon="el-icon-edit" type="primary" @click="update(scope.row)" >修改</el-button>
				<el-button  size="mini" v-if="checkPermission('/admin/Membe/delete')" icon="el-icon-delete" type="danger" @click="del(scope.row)" >删除</el-button>
			</div>
		</template>
	</el-table-column>
</el-table>
<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
</el-card>

<!--添加-->
<Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
<!--修改-->
<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>
<!--查看详情-->
<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refesh_list="index"></Detail>
<!--重置密码-->
<Resetpwd :info="resetPwdInfo" :show.sync="dialog.resetPwdDialogStatus" size="small" @refesh_list="index"></ResetPwd>
<!--导入弹窗-->
<Import :show.sync="dialog.importDialogStatus" excel="/uploads/admin/202308/会员管理.xlsx" import_url='/admin/Membe/import' @refesh_list="index"></Import>
<!--充值-->
<Jia :info="jiaInfo" :show.sync="dialog.jiaDialogStatus" size="small" @refesh_list="index"></Jia>
<!--扣除-->
<Jian :info="jianInfo" :show.sync="dialog.jianDialogStatus" size="small" @refesh_list="index"></Jian>
<!--导出弹窗-->
<el-dialog title="导出进度条" :visible="dumpshow" :before-close="closedialog" width="500px">
	<el-progress :percentage="percentage"></el-progress>
</el-dialog>

</div>
</template>

<script>
import Search from '@/components/common/Search.vue'
import Page from '@/components/common/Page.vue'
import TableTool from '@/components/common/TableTool.vue'
import Import from '@/components/common/Import.vue'
import TimeRangePiker from '@/components/common/TimeRangePiker.vue'
import Shengshiqu from '@/components/common/Shenshiqu.vue'
import XLSX from "xlsx"
import Add from '@/views/admin/membe/add.vue'
import Update from '@/views/admin/membe/update.vue'
import Detail from '@/views/admin/membe/detail.vue'
import Resetpwd from '@/views/admin/membe/resetPwd.vue'
import Jia from '@/views/admin/membe/jia.vue'
import Jian from '@/views/admin/membe/jian.vue'
export default {
	components: {
		Search,
		Page,
		TableTool,
		TimeRangePiker,
		Shengshiqu,
		Import,
		Add,
		Update,
		Detail,
		Resetpwd,
		Jia,
		Jian,
	},
	data: function() {
		return {
			dialog: {
				addDialogStatus : false,
				updateDialogStatus : false,
				detailDialogStatus : false,
				resetPwdDialogStatus : false,
				importDialogStatus : false,
				jiaDialogStatus : false,
				jianDialogStatus : false,
			},
			searchData:{},
			button_group:[
				{name:'添加',color:'success',access:'/admin/Membe/add',icon:'el-icon-plus',disabled:'',clickname:'add'},
				{name:'修改',color:'primary',access:'/admin/Membe/update',icon:'el-icon-edit',disabled:'single',clickname:'update'},
				{name:'删除',color:'danger',access:'/admin/Membe/delete',icon:'el-icon-delete',disabled:'multiple',clickname:'del'},
				{name:'查看详情',color:'info',access:'/admin/Membe/detail',icon:'el-icon-view',disabled:'single',clickname:'detail'},
				{name:'重置密码',color:'primary',access:'/admin/Membe/resetPwd',icon:'el-icon-lock',disabled:'single',clickname:'resetPwd'},
				{name:'导入',color:'warning',access:'/admin/Membe/import',icon:'el-icon-upload',disabled:'',clickname:'import'},
				{name:'客户端导出',color:'warning',access:'/admin/Membe/export',icon:'el-icon-download',disabled:'',clickname:'export'},
				{name:'充值',color:'primary',access:'/admin/Membe/jia',icon:'el-icon-plus',disabled:'single',clickname:'jia'},
				{name:'扣除',color:'primary',access:'/admin/Membe/jian',icon:'el-icon-plus',disabled:'single',clickname:'jian'},
				{name:'状态禁用',color:'primary',access:'/admin/Membe/forbidden',icon:'el-icon-edit-outline',disabled:'multiple',clickname:'forbidden'},
				{name:'车牌管理',color:'warning',access:'/admin/Membe/jumpUrl',icon:'el-icon-plus',disabled:'single',clickname:'jumpUrl'},
			],
			loading: false,
			page_data: {
				limit: 20,
				page: 1,
				total:20,
			},
			order:'',
			sort:'',
			ids: [],
			single:true,
			multiple:true,
			search_visible:true,
			list: [],
			updateInfo:{},
			detailInfo:{},
			resetPwdInfo:{},
			jiaInfo:{},
			jianInfo:{},
			exceldata:[],
			dumppage:1,
			ws:{},
			dumpshow:false,
			percentage:0,
			filename:'',
			sum_amount:'',
			is_clear:false,
		}
	},
	methods:{
		index(){
			let param = {limit:this.page_data.limit,page:this.page_data.page,order:this.order,sort:this.sort}
			Object.assign(param, this.filteredObject(this.searchData),this.convertToInt(this.$route.query))
			this.loading = true
			this.$axios.post('/admin/Membe/index',param).then(res => {
				if(res.data.status == 200){
					this.list = res.data.data.data
					this.page_data.total = res.data.data.total
					this.sum_amount = res.data.data.sum_amount
					this.loading = false
				}else{
					this.$message.error(res.data.msg);
				}
			})
		},
		updateExt(row,field){
			if(row.membe_id){
				this.$axios.post('/admin/Membe/updateExt',{membe_id:row.membe_id,[field]:row[field]}).then(res => {
					if(res.data.status == 200){
						this.$message({message: res.data.msg, type: 'success'})
					}else{
						this.$message.error(res.data.msg)
					}
				})
			}
		},
		add(){
			this.dialog.addDialogStatus = true
		},
		update(row){
			let id = row.membe_id ? row.membe_id : parseInt(this.ids)
			this.$axios.post('/admin/Membe/getUpdateInfo',{membe_id:id}).then(res => {
				if(res.data.status == 200){
					this.dialog.updateDialogStatus = true
					this.updateInfo = res.data.data
				}else{
					this.$message.error(res.data.msg)
				}
			})
		},
		del(row){
			this.$confirm('确定操作吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let ids = row.membe_id ? [row.membe_id] : this.ids
				let param = {membe_id:ids}
				this.$axios.post('/admin/Membe/delete',param).then(res => {
					if(res.data.status == 200){
						this.$message({message: res.data.msg, type: 'success'})
						this.index()
					}else{
						this.$message.error(res.data.msg)
					}
				})
			}).catch(() => {})
		},
		detail(row){
			this.dialog.detailDialogStatus = true
			this.detailInfo = {membe_id:row.membe_id ? row.membe_id : parseInt(this.ids)}
		},
		resetPwd(row){
			this.dialog.resetPwdDialogStatus = true
			this.resetPwdInfo = {membe_id:row.membe_id ? row.membe_id : parseInt(this.ids)}
		},
		import(){
			this.dialog.importDialogStatus = true
		},
		export(){
			this.$confirm('确定操作吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.dumpshow = true
				this.confirmexport()
			}).catch(() => {})
		},
		confirmexport(){
			let query = {page:this.dumppage,order:this.order,sort:this.sort}
			Object.assign(query, this.searchData,this.urlobj)
			this.$axios.post('/admin/Membe/export',query).then(res => {
				if(this.dumppage == 1){
					this.exceldata.push(res.data.data.header)
				}
				if(res.data.data.data && res.data.data.data.length > 0){
					res.data.data.data.forEach((item) => {
						this.exceldata.push(Object.values(item))
					})
				}
				this.ws = XLSX.utils.aoa_to_sheet(this.exceldata)
				if(res.data.data.percentage < 100){
					this.percentage = res.data.data.percentage
					this.dumppage = this.dumppage + 1
					this.confirmexport()
				}else{
					let wb = XLSX.utils.book_new()
					XLSX.utils.book_append_sheet(wb, this.ws)
					XLSX.writeFile(wb, res.data.data.filename)
					this.exceldata = []
					this.ws = {}
					this.dumpshow = false
					this.dumppage = 1
					this.percentage = 0
				}
			})
		},
		closedialog(){
			this.dumpshow = false
		},
		jia(row){
			this.dialog.jiaDialogStatus = true
			this.jiaInfo = {membe_id:row.membe_id ? row.membe_id : parseInt(this.ids)}
		},
		jian(row){
			this.dialog.jianDialogStatus = true
			this.jianInfo = {membe_id:row.membe_id ? row.membe_id : parseInt(this.ids)}
		},
		forbidden(row){
			this.$confirm('确定操作吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let ids = row.membe_id ? [row.membe_id] : this.ids
				let param = {membe_id:ids}
				this.$axios.post('/admin/Membe/forbidden',param).then(res => {
					if(res.data.status == 200){
						this.$message({message: res.data.msg, type: 'success'})
						this.index()
					}else{
						this.$message.error(res.data.msg)
					}
				})
			}).catch(() => {})
		},
		jumpUrl(row){
			let query = {}
			let ids = row.membe_id ? row.membe_id : this.ids.join(',')
			let data = {}
			this.list.forEach((item,i) => {
				if(item.membe_id == ids){
					data = this.list[i]
				}
			})
			Object.assign(query, {membe_id:data.membe_id})
			Object.assign(query, {jumpstate:1})
			this.$router.push({path: '/admin/Car/index',query:query})
		},
		selection(selection) {
			this.ids = selection.map(item => item.membe_id)
			this.single = selection.length != 1
			this.multiple = !selection.length
		},
		handleRowClick(row, rowIndex,event){
			if(event.target.className !== 'el-input__inner'){
				this.$refs.multipleTable.toggleRowSelection(row)
			}
		},
		rowClass ({ row, rowIndex }) {
			for(let i=0;i<this.ids.length;i++) {
				if (row.membe_id === this.ids[i]) {
					return 'rowLight'
				}
			}
		},
		sortChange(val){
			if(val.order == 'descending'){
				this.order= 'desc'
			}
			if(val.order == 'ascending'){
				this.order= 'asc'
			}
			this.sort = val.prop
			this.index()
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if(index === 1) {
					sums[index] = '合计'
				}
				if(column.label === '积分') {
					sums[index] = this.sum_amount
				}
			})
			return sums
		},
		fn(method){
			this[method](this.ids)
		},
	},
	mounted(){
		this.index()
	},
}
</script>

<style  lang="scss">
@import '@/assets/scss/common.scss'
</style>
